<template>
  <div>
    <div >
      <swiper @change="swiperChange" vertical='true' class="palycontainer" :circular="iscircular"
      	:current="currentIndex" @touchstart="start" @touchend="end" >
        	<swiper-item v-for="(item,index) in itemlist" :key='index'>
            <Videos3 @back='back' :PlayerItem='PlayerItem' :ref='item.id'/>
          </swiper-item>
      </swiper>
    </div>
	<RightMenu></RightMenu>
	<TopMenu></TopMenu>
  </div>
</template>

<script>
  import Videos3 from '@/components/Videos3.vue'
  import RightMenu from "@/components/RightMenu.vue"
  import TopMenu from "@/components/TopMenu.vue"
  export default {
    components:{
      Videos3,
	  RightMenu,
	  TopMenu
    },
    data(){
      return {
        currentIndex:0,
        iscircular:true,
        PlayerItem:{
          name: '以敲代码为趣的搬砖工，格子间的布局像极了工厂流水线，一厂换一厂',
          school: '重庆大学',
          schoolurl: 'https://cdn.img.up678.com/icon/school/02重庆大学1.jpg',
          coverurl: require("@/static/background.png"),
          view: '20w',
          vote: '4.8k',
          id: '021424',
		  videosrc: require("../../static/video/01.mp4"),
          // videosrc: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
          poster:require("@/static/background.png"),
          comment:[{title:'人文与艺术类',number:'1.3w',id:parseInt(Math.random()*10000),active:false,},
           {title:'永远的神',number:'1.3w',id:parseInt(Math.random()*10000),active:false,},
          {title:'这个也太ku了吧',number:'300',id:parseInt(Math.random()*10000),active:false,},
          {title:'LOVE',number:'1w',id:parseInt(Math.random()*10000),active:false,},
          {title:'这个也太ku了吧',number:'300',id:parseInt(Math.random()*10000),active:false,},
          ]
        },
        itemlist:[
			{
				id:'play0',
				imgUrl: "http://gossv.cfp.cn/videos/mts_videos/medium/VCG42N1356847318.mp4"
			},
			{
				id:'play1',
				imgUrl: "//gossv.cfp.cn/videos/mts_videos/medium/temp/VCG42N845889956.mp4"
				},
			],
        //滑动监听
        startData: {
        	clientY: "",
        	clientX: "",
        },
        endData: {
        	clientY: "",
        	clientX: "",
        },
      }
    },
    mounted() {
      // 首屏播放
      this.$refs[`play0`][0].outplay()
    },
    methods:{
      back(){
        uni.navigateBack({
        	delta: 1,
        	// success: function() {
        	// 	beforePage.$vm.init(); // 执行前一个页面的刷新
        	// }
        });
      },
      start(e){
        this.startData.clientX = e.changedTouches[0].clientX;
        this.startData.clientY = e.changedTouches[0].clientY;
      },
      end(e){
          this.endData.clientX = e.changedTouches[0].clientX;
          this.endData.clientY = e.changedTouches[0].clientY;
      },

      swiperChange(e){
        // sweiper切换 控制video播放与暂停
        for(var i=0;i<this.itemlist.length;i++){
          if(i!==e.detail.current){
             this.$refs[`play${i}`][0].outpause()
          }
        }
        this.$refs[`play${e.detail.current}`][0].outplay()
        // 判断是上滑下滑
        const subX = this.endData.clientX - this.startData.clientX;
        const subY = this.endData.clientY - this.startData.clientY;
        if(subY>30){
          console.log('上滑')
        }
        if(subY<-30){
          console.log('下滑')
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .palycontainer {
  	width: 100%;
  	height: 100vh;
  }
</style>